<template>
    <div class="box">
        <div class="header"><van-icon name="arrow-left" @click="$router.back" />学习计划</div>
        <!-- 开始 -->
        <van-cell-group inset>
            <van-field v-model="value" label="开始日期" placeholder="请选择日期" readonly @click="flag = !flag" />
        </van-cell-group>
        <!-- 结束 -->
        <van-cell-group inset>
            <van-field v-model="overValue" label="结束时间" placeholder="请选择日期" readonly @click="flag2 = !flag2" />
        </van-cell-group>
        <!-- 科目 -->
        <van-cell-group inset>
            <van-field v-model="subjectValue" label="科目" placeholder="请选择科目" readonly @click="flag3 = !flag3" />
        </van-cell-group>
        <van-count-down :time="time" ref="countDown" :auto-start="false" @finish="onFinish">
            <template #default="timeData">
            <span class="block">{{ timeData.hours }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.seconds }}</span>
            </template>
        </van-count-down>
        <van-grid clickable>
  <van-grid-item text="开始" icon="play-circle-o" @click="start" />
  <van-grid-item text="暂停" icon="pause-circle-o" @click="pause" />
  <van-grid-item text="重置" icon="replay" @click="reset" />
</van-grid>
    </div>
    <!-- 科目 -->
    <van-picker v-model="selectedValues" 
    title="" 
    :columns="columns" 
    v-if="flag3" 
    @cancel="esc"
    class="submit" 
    @confirm="changeSubmit" />
    <!-- 开始时间 -->
    <van-picker-group title="" :tabs="['选择日期', '选择时间']" next-step-text="下一步" @confirm="onConfirm" @cancel="onCancel"
        v-if="flag" class="timer">
        <van-date-picker v-model="currentDate" :min-date="minDate" :max-date="maxDate" />
        <van-time-picker v-model="currentTime" />
    </van-picker-group>
    <!-- 结束时间 -->
    <van-picker-group title="" :tabs="['选择日期', '选择时间']" next-step-text="下一步" @confirm="onConfirm2" @cancel="onCancel"
        v-if="flag2" class="timer">
        <van-date-picker v-model="currentDate" :min-date="minDate" :max-date="maxDate" />
        <van-time-picker v-model="currentTime" />
    </van-picker-group>
</template>
<script lang="ts" setup>
import { showToast } from 'vant';
const time = ref(30 * 60 * 60 * 1000);
const countDown = ref()
const start = () => {
      countDown.value.start();
    };
    const pause = () => {
      countDown.value.pause();
    };
    const reset = () => {
      countDown.value.reset();
    };
    const onFinish = () => showToast('倒计时结束');
import { ref } from 'vue'
// 开始时间
const value = ref('')
// 结束时间
const overValue = ref('')
// 科目
const subjectValue = ref('')

const currentDate = ref(['2023', '12', '22'])
const currentTime = ref(['08', '00'])
const minDate = new Date(2022, 12, 22)
const maxDate = new Date(2025, 11, 30)
const flag = ref(false)
const flag2 = ref(false)
const flag3 = ref(false)
// 取消选择
const onCancel = () => {
    flag.value = false
    flag2.value = false
}
// 开始时间确定选择
const onConfirm = () => {
  flag.value = false
  value.value = `${currentDate.value[0]}年${currentDate.value[1]}月${currentDate.value[2]}日 ${currentTime.value[0]}:${currentTime.value[1]}`
  // 将开始时间转换为毫秒
  const startTime = new Date(`${currentDate.value[0]}-${currentDate.value[1]}-${currentDate.value[2]} ${currentTime.value[0]}:${currentTime.value[1]}`).getTime();
  // 如果结束时间已经设置，更新 time
  if (overValue.value) {
    const endTime = new Date(overValue.value.replace('年', '-').replace('月', '-').replace('日', '')).getTime();
    time.value = endTime - startTime;
  }
}
// 结束时间确定选择
const onConfirm2 = () => {
  flag2.value = false
  overValue.value = `${currentDate.value[0]}年${currentDate.value[1]}月${currentDate.value[2]}日 ${currentTime.value[0]}:${currentTime.value[1]}`
  // 将结束时间转换为毫秒
  const endTime = new Date(`${currentDate.value[0]}-${currentDate.value[1]}-${currentDate.value[2]} ${currentTime.value[0]}:${currentTime.value[1]}`).getTime();
  // 如果开始时间已经设置，更新 time
  if (value.value) {
    const startTime = new Date(value.value.replace('年', '-').replace('月', '-').replace('日', '')).getTime();
    time.value = endTime - startTime;
  }
}
// 科目选择
const columns = [
    { text: '数学', value: '数学' },
    { text: '语文', value: '语文' },
    { text: '英语', value: '英语' },
    { text: '生物', value: '生物' },
    { text: '化学', value: '化学' },
    { text: '地理', value: '地理' },
    { text: '物理', value: '物理' },
    { text: '历史', value: '历史' },
    { text: '政治', value: '政治' },
]
const selectedValues = ref([''])
// 科目选择确定按钮
function changeSubmit() {
    flag3.value = false
    subjectValue.value = selectedValues.value[0]
}
function esc() {
    flag3.value = false
}






</script>

<style lang="scss" setup>
.submit{
    transform: translateY(-300px);

}
.timer {
    transform: translateY(-260px);
}

.header {
    .van-icon {
        position: fixed;
        left: 10px;
        top: 15px;
        font-size: 20px;
    }
}

.colon {
    display: inline-block;
    margin: 0 4px;
    color: #1989fa;
  }
  .block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #4bc4b1;
  }
  .van-count-down {
    margin: 0 auto;
    margin-top: 100px;
    width: 100%;
    display: flex;
    span {
        margin: 0 auto;
        display: block;
        width: 50px;
        height: 50px;
        line-height: 50px;
        font-size: 20px;
    }
  }
  .van-grid{
    justify-content: space-between;
    flex-wrap: nowrap;
    position: fixed;
    bottom: 200px;
    width: 100%;
  }
</style>